{% extends "djdb/internal_page.html" %}

{% load common_extras %}
{% load djdb_extras %}

{% block breadcrumbs %}
<a href="/">chipradio home</a> /
<a href="/djdb/">DJ Database home</a>
{% endblock %}

{% block content %}

{% block extrahead %}
<script type="text/javascript" src="/media/common/js/jquery-ui/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/media/common/js/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/media/djdb/js/djdb.js"></script>
<script type="text/javascript">
  var crate_key = "{{ crate.key }}";
</script>
<script type="text/javascript" src="/media/djdb/js/djdb_crate.js"></script>
{% endblock %}

<p/>
<div id="reorder"></div>

<div id="crate">
  <div id="add-crate-item-column">
    <form method="post" action="/djdb/crate/{{ crate.key }}/add_item">
      <table>
        {{ crate_form }}
      </table>
      <input type="submit" class="button" name="save" value="Save To Crate"/>
    </form>
  </div>
  
  <form id="crate_items_form" method="post" action="">
  <div id="crate-items-column">
      Select crate: {{ crate_items_form.crates }}
      Name: {{ crate_items_form.name }}
      Default? {{ crate_items_form.is_default }}
      <input type="submit" name="save_crate" value="Save"/><br/>
      <input type="submit" name="new_crate" value="New Crate"/>
      <input type="submit" class="remove_crate" name="remove_crate" value="Remove Crate"/>
      <input type="submit" class="remove_all_crate_items" name="remove_all_crate_items" value="Remove All Items"/>      
      <input type="submit" class="remove_selected_crate_items" name="remove_selected_crate_items" value="Remove Selected Items"/>
      <div class="warning remove_all_crate_items" style="display: none">
        Are you sure:
        <input type="submit" name="remove_all_crate_items" value="Confirm"/>
        <input type="submit" class="cancel" name="cancel" value="Cancel"/>
      </div>
      <div class="warning remove_crate" style="display: none">
        Are you sure:
        <input type="submit" name="remove_crate" value="Confirm"/>
        <input type="submit" class="cancel" name="cancel" value="Cancel"/>
      </div>
{% if crate_items %}
    <br/>
    Sort by: {{ crate_items_form.sort_by }}
    <input type="submit" name="sort" value="Sort"/><br/>
    Select: <a class="select_all" href="">All</a>,
            <a class="select_none" href="select_none">None</a><br/>
    <i><b>Drag and drop items to change order.</b></i>
    <ul id="sortable">
  {% for item in crate_items %}
      <li id="item_{{ forloop.counter }}">
        <table width="100%"><tr><td>
          <input type="checkbox" name="crate_item_{{ forloop.counter }}"/>
    {% ifequal item.kind 'Artist' %}
          <img src="/media/common/img/artist.png" alt="An artist" title="An artist"/>
          {{ item }}
          <a href="{{ item.url }}" alt="Go to artist." title="Go to artist."><img src="/media/common/img/link.png"/></a>
    {% else %}
      {% ifequal item.kind 'Album' %}
          <img src="/media/common/img/album.png" alt="An album" title="An album"/>
          <div class="categories">
        {% for category in item.category_tags %}
            <div class="track_{{ category }}" title="{{ category|replace:'/_/ '|capfirst }}">
          {% ifequal category "heavy_rotation" %}★
          {% else %}{% ifequal category "light_rotation" %}◆
          {% else %}{% ifequal category "local_classic" %}■
          {% else %}{% ifequal category "local_current" %}●
          {% endifequal %}{% endifequal %}{% endifequal %}{% endifequal %}
            </div>
        {% endfor %}
          </div>
        {{ item.album_artist }} / {{ item }} / {{ item.label_display }} / {{ item.year_display }}
          <a href="{{ item.url }}" alt="Go to album." title="Go to album."><img src="/media/common/img/link.png"/></a>
      {% else %}
        {% ifequal item.kind 'Track' %}
          <img src="/media/common/img/track.png" alt="A track" title="A track"/>
          <div class="categories">
          {% for category in item.album.category_tags %}
            <div class="track_{{ category }}" title="{{ category }}">
          {% ifequal category "heavy_rotation" %}★
          {% else %}{% ifequal category "light_rotation" %}◆
          {% else %}{% ifequal category "local_classic" %}■
          {% else %}{% ifequal category "local_current" %}●
          {% endifequal %}{% endifequal %}{% endifequal %}{% endifequal %}
            </div>
          {% endfor %}
          </div>
         {{ item.duration }} {{ item.album.album_artist }} / {{ item }} / {{ item.album }} / {{ item.album.label_display }} / {{ item.album.year_display }}
          <a href="{{ item.album.url }}" alt="Go to track." title="Go to track."><img src="/media/common/img/link.png"/></a>
        {% else %}
          {% ifequal item.kind 'CrateItem' %}
          <img src="/media/common/img/track.png" alt="A track" title="A track"/>
          <div class="categories">
            {% for category in item.categories %}
            <div class="track_{{ category }}" title="{{ category }}">
              {% ifequal category "heavy_rotation" %}★
              {% else %}{% ifequal category "light_rotation" %}◆
              {% else %}{% ifequal category "local_classic" %}■
              {% else %}{% ifequal category "local_current" %}●
              {% endifequal %}{% endifequal %}{% endifequal %}{% endifequal %}
            </div>
            {% endfor %}
          </div>
        {{ item.artist }} / {{ item.track }} / {{ item.album }} / {{ item.label }}
            {% if item.notes %}
          <blockquote>{{ item.notes }}</blockquote>
            {% endif %}
          {% else %}
        Unrecognized item.
          {% endifequal %}
        {% endifequal %}
      {% endifequal %}
    {% endifequal %}
        </td>
        <td align="right">
          <a class="send_to_playlist" href="/djdb/crate/send_to_playlist/{{ item.key }}"><img src="/media/common/img/play.png" alt="Send to Playlist" title="Send to Playlist"/></a>
          <a href="/djdb/crate/{{ crate.key }}/remove_item?response_page=crate&item_key={{ item.key }}"><img src="/media/common/img/remove.png" alt="Remove Item from Crate" title="Remove Item from Crate"/></a>
        </td></tr></table>
      </li>
  {% endfor %}
    </ul>

    <img src="/media/common/img/artist.png"/> = Artist
    <img src="/media/common/img/album.png"/> = Album
    <img src="/media/common/img/track.png"/> = Track<br/>
    <div class="categories">
      <div class="track_heavy_rotation">★ = Heavy rotation</div>
      <div class="track_light_rotation">◆ = Light rotation</div>
      <div class="track_local_classic">■ = Local classic</div>
      <div class="track_local_current">● = Local current</div>
    </div><br/>
{% else %}
    <div id="empty_crate">
    There are no items in this crate.
    </div>
{% endif %}
  </div>
  </form>
</div>

{% endblock %}
